<template>
  <div class="purchase">
    <van-nav-bar
      title="购机指南"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
      @click-right="$router.push('/search')"
    >
      <template #right>
        <i class="iconfont icon-sousuo"></i>
      </template>
    </van-nav-bar>
    <div class="content_television" style="margin-bottom: 0px">
      <img :src="headerUrl[$route.params.index]" alt="" />
    </div>
    <div
      v-for="item of notebookList[0].List"
      :key="item.id"
      @click="$router.push('/details')"
    >
      <div style="border-bottom: 0.266667rem solid rgb(245, 245, 245)"></div>
      <div class="list">
        <div class="img">
          <img class="big" :src="item.url" />
        </div>
        <div class="info">
          <div class="l l1">
            <div class="name fz-m">{{ item.name }}</div>
            <div class="price">￥{{ item.newPrice }}</div>
          </div>
          <div class="l l2">
            <div class="brief w450">
              {{ item.introduction }}
            </div>
            <div class="buybtn">立即购买</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { NavBar } from "vant";
Vue.use(NavBar);
export default {
  name: "purchase",
  data() {
    return {
      headerUrl: [
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a0fa81690ba4a662e5f160fe2505b776.jpg",
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7c9fba2f091d6272e2a954b93d7d0789.jpg",
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5aefa645697a82827ac26f74312d5a8f.jpg",
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0942abe3607811546b8bc1cdac099c49.jpg",
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d2a8d1ea33d6a5a751c572b937912273.jpg",
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/dbdbb0a74bbf46f9a52c41e384efc7e3.jpg",
      ],
      notebookList: [
        {
          id: 1001,
          name: "重磅推荐",
          classSrc:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1bc92bd7fdb80c023c6887ae4f419e71.jpg?f=webp",
          List: [
            {
              id: 1101,
              name: "RedmiBook Air 13",
              introduction: "打开它，就像翻开一本杂志",
              url: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b40029067abdfcc40bb6bde90b5d95d8.jpg?thumb=1&w=696&h=436",
              newPrice: "5199",
            },
            {
              id: 1102,
              name: "小米显示器 27英寸 165Hz版",
              introduction: "超广色域震撼影音，超清高刷畅爽电竞",
              url: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/84771bd0e6146ecbb6479735a4263ed5.jpg?thumb=1&w=696&h=436",
              newPrice: "2199",
            },
          ],
        },
        {
          id: 2001,
          name: "年度新品",
          classSrc:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6a6c6904c72672a67f1ddb6d4938d414.jpg?f=webp",
          List: [
            {
              id: 1101,
              name: "全面屏电视  E55X",
              introduction: "潮流全面屏设计，4K超高清画质",
              url: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c691b8a8dc7e3a37bdea7bd5eb6eaf3c.jpg?thumb=1&w=338&h=338",
              newPrice: "2099",
              oldPrice: "2299",
            },
            {
              id: 1102,
              name: "小米全面屏电视 E65X",
              introduction: "全面屏设计搭配高质量画质",
              url: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fe3f37e6f1ad601e1d8348195d620662.jpg?thumb=1&w=338&h=338",
              newPrice: "2699",
              oldPrice: "2999",
            },
          ],
        },
      ], //笔记本列表
    };
  },
};
</script>
<style lang="less">
.purchase {
  .van-nav-bar {
    background-color: rgb(242, 242, 242);
    position: sticky;
    width: 100%;
    top: 0px;
    .van-nav-bar__left {
      .van-icon,
      .van-nav-bar__text {
        font-size: 16px;
        line-height: 46px;
        color: #8a8a8a;
      }
    }
  }
  .content_television {
    img {
      width: 100%;
    }
  }
  .list {
    padding: 0 0.12rem;
    .info {
      padding: 0.2rem 0.27rem;
      text-align: left;
      background-color: #fff;
      .l {
        display: -webkit-box;
        display: flex;
        overflow: hidden;
        -webkit-box-align: justify;
        box-align: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        align-items: center;
        .name {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          color: rgba(0, 0, 0, 0.87);
          font-size: 0.32rem;
        }
        .price {
          font-size: 0.28rem;
          color: #ea625b;
          height: 1.5em;
          line-height: 1.5em;
          position: relative;
          display: inline-block;
          padding-left: 0.5em;
        }
        .brief {
          margin-top: 0.06rem;
          font-size: 0.22rem;
          line-height: 0.3rem;
          color: rgba(0, 0, 0, 0.54);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .buybtn {
          width: 2rem;
          background: #ea625b;
          border-radius: 0.05rem;
          text-align: center;
          color: #fff;
          font-size: 0.24rem;
          padding: 0.16rem 0;
          font-weight: 700;
        }
      }
    }
    .img {
      img {
        width: 100%;
      }
    }
  }
}
</style>